<template>
	<view>
		<view class="top">
			<view class="topDetails">
				<view class="homeImg"><open-data type="userAvatarUrl"></open-data></view>
				<view class="content">
					<view><open-data type="userNickName" style="color: #fff;"></open-data></view>
					<view class="phone">手机号：{{userInfo.phone}}</view>
				</view>
				<!-- <view class="wd" >
					<image src="../../static/wdgd.png" mode=""></image>
				</view> -->
			</view>
			
		</view>
		
		<view class="wdType">
			<view class="wdTypeL" @click='goCollect'>
				<image src="../../static/wdsc.png" mode=""></image>
				<text>我的收藏</text>
			</view>
			<view class="wdTypeR" @click="chatList">
				<image src="../../static/wdxx.png" mode=""></image>
				<text class="wdxx">我的消息
					<text class="wdxx1" v-if="xiaoxicount>0">{{xiaoxicount}}</text>
				</text>
			</view>
		</view>
		
		<view class="wdType1" >
			<view class="titles">
				我的订单
			</view>
			
				<view class="typeImg">
					<view @click="wddd(0)">
						<image src="../../static/qbdd.png" mode="" class="imgss"></image>
						<text>全部订单</text>
					</view>
					<view @click="wddd(1)">
						<image src="../../static/jxz.png" mode="" class="imgss"></image>
						<text>进行中</text>
					</view>
					<view @click="wddd(2)">
						<image src="../../static/ywc.png" mode="" class="imgss"></image>
						<text>已完成</text>
					</view>
					<view @click="wdtk()">
						<image src="../../static/tksh.png" mode="" class="imgss"></image>
						<text>退款售后</text>
					</view>
				</view>
		</view>
		
		<view class="wdType1" style="height: 770rpx;">
			<view class="titles">
				我的记录
			</view>
			
				<view class="typeImg">
					<view @click="toreadrPage">
						<image src="../../static/gzjl.png" mode="" class="imgss"></image>
						<text>估值记录</text>
					</view>
					<view  @click="salesCar">
						<image src="../../static/mcjl.png" mode="" class="imgss"></image>
						<text>卖车记录</text>
					</view>
					<view @click="queryRecord">
						<image src="../../static/cxjl.png" mode="" class="imgss"></image>
						<text>查询记录</text>
					</view>
					<view @click="cjbg">
						<image src="../../static/wdcjbg.png" mode="" class="imgss"></image>
						<text>车检报告</text>
					</view>
					
				</view>
				<view @click="tcdl" class="tcdl">
					<text>退出登录</text>
				</view>
		</view>
		
		<u-modal v-model="show" :content="content" show-cancel-button='true' @confirm='confirm()'></u-modal>
	<!-- 	<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10">
				<view class="tx">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userInfo.nickName}}</view>
				
<open-data type="userNickName"></open-data>
				<view class="u-font-14 u-tips-color">手机号:{{userInfo.phone}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="chat" title="消息中心" @click="goMessages"></u-cell-item>
				<u-cell-item icon="heart" title="订阅车源"></u-cell-item>
				<u-cell-item icon="star" title="收藏车源" @click='goCollect'></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="order" title="估值记录" @click="toreadrPage"></u-cell-item>
				<u-cell-item icon="file-text" title="卖车记录" @click="salesCar"></u-cell-item>
				<u-cell-item icon="file-text" title="查询记录" @click="queryRecord"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="edit-pen" title="我的消息"  @click="myMessages">
					<u-badge :count="unreadLength" :absolute="false" slot="right-icon"></u-badge>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="edit-pen" title="消息列表"  @click="chatList">
					<u-badge :count="unreadLength" :absolute="false" slot="right-icon"></u-badge>
				</u-cell-item>
			</u-cell-group>
		</view> -->

	</view>
</template>

<script>
	import API from "@/api/my.js"
	export default {
		data() {
			return {
				// pic:'https://uviewui.com/common/logo.png',
				messageInfo: [],
				messageLength:'',
				unreadLength:'',
				parms: {
					page: 1,
					limit: 10
				},
				userInfo:{
					nickName:"",
					avatarUrl:"",
					phone:""
				},
				xiaoxicount:0,
				show:false,
				content: '确定退出登录吗',
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow() {
			this.getMessageList();
			this.getAllweidu();
			// this.xiaoxiList();
			
		},
		methods: {
			confirm(){
				// let that = this;
				uni.removeStorage({
				    key: 'token',
				    success: function (res) {
				        uni.reLaunch({
				            url: '/pages/loginBtn/loginBtn'
				        });
				    }
				});
				
			},
			//退出登录
			tcdl(){
				this.show = true;
				console.log(123)
			},
			//退款售后
			wdtk(){
				uni.navigateTo({
				    url: '/pagesB/refund/refund'
				});
				
			},
			xiaoxiList(){
				// let that = this;
				// that.xiaoxicount = 0;
				
			},
			getAllweidu(){
				let that = this;
				that.xiaoxicount = 0;
				
				let token = uni.getStorage({
					token: token
				})
				API.getAllweidu(token).then(res=>{
					that.xiaoxicount = that.xiaoxicount+res.data
				})
				API.getAllMessageweidu(token).then(res=>{
					that.xiaoxicount = that.xiaoxicount+res.data
				})
			},
			wddd(type){
				uni.navigateTo({
				    url: '/pagesB/allOrders/allOrders?type='+type
				});
			},
			cjbg(){
				
				uni.navigateTo({
				    url: '/pagesB/meCarReport/meCarReport'
				});
			},
			getUserInfo(){
				let token = uni.getStorage({
					token: token
				})
				API.getUserInfo(token).then(res=>{
					console.log(res)
					this.userInfo.phone = res.data.phone
					// this.userInfo.nickname = res.data.nickname
					console.log(this.userInfo);
				})
	
				
			},
			getMessageList(){
				let token = uni.getStorage({
					token: token
				})
				API.getMessageList(this.parms).then(res => {
					
					this.messageInfo = res.data;
					this.messageLength = res.data.length;
					let unread=res.data.filter(v=>{
						return v.messageStatus==1
					})
					this.unreadLength = unread.length
					console.log(this.unread)
					// if(this.messageLength > 99){
					// 	this.messageLength = 99+
					// }
					// console.log(this.messageLength)
				})
			},
			toreadrPage(){
				uni.navigateTo({
					url:'/pagesB/valuationRecord/valuationRecord'
				})
			},
			goMessages(){
				uni.navigateTo({
					url:'../messageCenter/messageCenter'
				})
			},
			goCollect(){
				uni.navigateTo({
					url:'./myCollect'
				})
			},
			salesCar(){
				uni.navigateTo({
					url:'/pagesA/sellCar/salesCar'
				})
			},
			queryRecord(){
				uni.navigateTo({
					url:'/pagesB/queryRecord/queryRecord'
				})
			},
			myMessages(){
				uni.navigateTo({
					url:'/pagesB/myMessage/myMessage'
				})
			},
			chatList(){
				uni.navigateTo({
					url:'/pages/chatList/chatList'
				})
			}
			
				
			
		}
	}
</script>

<style lang="scss">
	.tcdl{
		width: 368rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: auto;
		font-size: 30rpx;
		border-radius: 4rpx;
		background: #dd4835;
		color: #fff;
		position: absolute;
		bottom: 182rpx;
		left:191rpx
		
	}
	.wdxx{
		position: relative;
	}
	.wdxx1{
		position: absolute;
		font-size: 25rpx;
		color: #fff;
		background: #FD7E6E;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 50%;
	}
	.typeImg{
		width: 100%;
		height: 177rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 45rpx 35rpx 45rpx;
		view{
			width: 25%;
			height: 157rpx;
			// background: #000;
			margin-top: 36rpx;
			.imgss{
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				display: block;
				margin: auto;
			}
			text{
				font-size: 24rpx;
				color: #2C2C2C;
				text-align: center;
				display: block;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}
.titles{
	font-family: PingFangSC-Medium;
	font-size: 36rpx;
	color: #2C2C2C;
	font-weight: 500;
}
.top{
	width: 750rpx;
	height: 220rpx;
	background-image: linear-gradient(225deg, #00568F 0%, #002B56 100%);
	padding: 32rpx;
	.topDetails{
		display: flex;
		margin-top: 25rpx;
		.content{
			margin-left: 24rpx;
			font-size: 32rpx;
		}
		.phone{
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.homeImg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.wd{
		margin-left: 160rpx;
		    margin-top: 40rpx;
		
		image{
			width: 12rpx;
			height: 20rpx;
			
		}
	}
}	

.wdType{
	padding: 32rpx 114rpx;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
.wdType1{
	padding: 32rpx;
	background: #fff;
	margin-top: 7rpx;
}
.wdTypeL{
	border-right: 1px solid #EFEFEF;;
}
.wdTypeR{
	padding-left: 40rpx;
}
.wdTypeL,.wdTypeR{
	width: 260rpx;
	height: 90rpx;
	display: flex;
	line-height: 90rpx;
	font-size: 28rpx;
	color: #2C2C2C;
	image{
		width: 46rpx;
		height: 46rpx;
		margin-top: 20rpx;
		margin-right: 28rpx;
	}
}
// page{
// 	background-color: #ededed;
// }

// .tx{
// 	width: 100rpx;
// 	height: 100rpx;
// 	border-radius: 50%;
// 	overflow: hidden;
// }
// .camera{
// 	width: 54px;
// 	height: 44px;
	
// 	&:active{
// 		background-color: #ededed;
// 	}
// }
// .user-box{
// 	background-color: #fff;
// }
</style>
